<template>
  <div>
    <el-container>
      <el-aside width="200px" v-show="isShow">
        <el-card style="height: calc(100% - 10px)">
          <plantDetails-tree
            @showTree="handleShowTree"
            @handleTree="handleTreeData"
          ></plantDetails-tree>
        </el-card>
      </el-aside>
      <el-main>
        <isShowTreeBtn @showTree="handleShowTree"></isShowTreeBtn>
        <el-row :gutter="10">
          <el-col :span="4">
            <el-image
              style="width: 100%; height: 100%"
              :src="require('@/assets/solarPower/nibianqi.png')"
              fit="fill"
            />
          </el-col>
          <el-col :span="20">
            <div class="details-title-warp">设备实时数据</div>
            <el-table
              :data="tableData"
              stripe
              border
              :header-cell-style="{
                background: '#fafafa',
                fontSize: '12px',
                color: '#000',
              }"
            >
              <el-table-column label="组串" prop="name" width="150"></el-table-column>
              <el-table-column label="PV1" prop="pv1"></el-table-column>
              <el-table-column label="PV2" prop="pv2"></el-table-column>
              <el-table-column label="PV3" prop="pv3"></el-table-column>
              <el-table-column label="PV4" prop="pv4"></el-table-column>
              <el-table-column label="PV5" prop="pv5"></el-table-column>
              <el-table-column label="PV6" prop="pv6"></el-table-column>
              <el-table-column label="PV7" prop="pv7"></el-table-column>
              <el-table-column label="PV7" prop="pv8"></el-table-column>
            </el-table>
            <div style="margin: 20px 0">
              <el-descriptions class="margin-top" :column="3" size="" border>
                <el-descriptions-item v-for="(val, key) in realTimeDict" :item="key">
                  <template slot="label">
                    <div style="color: #000; font-weight: bold">
                      <i class="el-icon-orange"></i>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="val"
                        placement="top-start"
                      >
                        <span>&nbsp;{{ val }}</span>
                      </el-tooltip>
                    </div>
                  </template>
                  <div>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="realTimeData[key]"
                      placement="top-start"
                    >
                      <span>{{ realTimeData[key] }}</span>
                    </el-tooltip>
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="details-title-warp">基础信息</div>
            <el-descriptions class="margin-top" :column="3" size="" border>
              <el-descriptions-item v-for="(val, key) in basicDict" :item="key">
                <template slot="label">
                  <div style="color: #000; font-weight: bold">
                    <i class="el-icon-orange"></i>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="val"
                      placement="top-start"
                    >
                      <span>&nbsp;{{ val }}</span>
                    </el-tooltip>
                  </div>
                </template>
                <div>
                  <el-tooltip class="item" effect="dark" placement="top-start">
                    <span>{{ basicData[key] }}</span>
                    <template #content>
                      {{ basicData[key] }}
                    </template>
                  </el-tooltip>
                </div>
              </el-descriptions-item>
            </el-descriptions>
            <el-form
              :model="formData"
              label-width="130px "
              style="margin-top: 10px"
              :inline="true"
            >
              <el-form-item label="上级设备的sn号:">
                <el-row :gutter="10">
                  <el-col :span="20">
                    <el-input v-model="treeName" placeholder="请输入sn号"></el-input>
                  </el-col>
                  <el-col :span="4">
                    <el-button type="primary" @click="handleSaveTree">保存</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import plantDetailsTree from "../components/tree.vue";
import isShowTreeBtn from "../components/isShowTreeBtn.vue";
import { getPvData, getSaveSuperior } from "@/api/solarPower/index.js";
import { mapState } from "vuex";
export default {
  components: { plantDetailsTree, isShowTreeBtn },
  name: "plantDetails",
  data() {
    return {
      treeName: "",
      isShow: true,
      formData: {
        sn: null,
      },
      paramData: this.$store.state.solarPower.terrData,

      tableData: [
        {
          id: 1,
          name: "输入电压(V)",
          pv1Data: "333",
          pv2Data: "222",
        },
        {
          id: 2,
          name: "输入电流(A)",
          pv1Data: "444",
          pv2Data: "555",
        },
      ],
      //基础信息
      basicData: {},

      basicDict: {
        // pv_equipment_id: "主键", //主键
        devname: "设备名称", //设备名称
        id: "设备ID（设备编号）", //设备ID（设备编号）
        gridconnectiondate: "电站的并网时间，包含时区", //电站的并网时间，包含时区
        contactmethod: "电站联系人联系方式", //电站联系人联系方式
        contactperson: "电站联系人", //电站联系人
        capacity: "组串容量", //组串容量
        latitude: "纬度", //纬度
        longitude: "经度", //经度
        plantname: "电站名称", //电站名称
        invtype: "机型（只有逆变器有机型）", //机型（只有逆变器有机型）
        softwareversion: "软件版本号", //软件版本号
        devtypeid: "设备类型ID", //设备类型ID
        esncode: "设备SN号", //设备SN号
        parent_id: "父ID", //父ID
        pv_dev_state: "设备状态", //设备状态
        plantaddress: "电站详细地址", //电站详细地址
        plantcode: "电站编号", //电站编号
        stationcode: "电站编号", //电站编号
        add_userid: "添加人ID", //添加人ID
        add_date: "添加时间", //添加时间
        modify_userid: "修改人ID", //修改人ID
        modify_date: "修改时间", //修改时间
        system_id: "系统ID", //系统ID
        devstate: "设备状态", //设备状态
      },
      //实时数据
      realTimeData: {},
      realTimeDict: {
        //逆变器状态
        inverterStateStr: "逆变器状态",
        //当日发电量
        day_cap: "当日发电量",
        //累计发电量
        total_cap: "累计发电量",
        //有功功率
        active_power: "有功功率",
        //输出无功功率
        reactive_power: "输出无功功率",
        //功率因数
        power_factor: "功率因数",
        //电网频率
        elec_freq: "电网频率",
        //电网A相电流
        a_i: "电网A相电流",
        //电网B相电流
        b_i: "电网B相电流",
        //电网C相电流
        c_i: "电网C相电流",
        //A相电压
        a_u: "A相电压",
        //B相电压
        b_u: "B相电压",
        //C相电压
        c_u: "C相电压",
        //逆变器开机时间
        open_time: "逆变器开机时间",
        //逆变器关机时间
        close_time: "逆变器关机时间",
        //内部温度
        temperature: "内部温度",
      },
    };
  },
  created() {},
  mounted() {
    // console.log("1", this.paramData);
    this.getPvData();
  },

  watch: {
    "$store.state.solarPower.terrData": {
      deep: true,
      handler(val) {
        this.paramData = val;
        // console.log(" this.paramData", this.paramData);
        this.getPvData();
      },
    },
  },
  methods: {
    getData() {},
    handleShowTree(val) {
      this.isShow = val;
    },
    getPvData() {
      getPvData(this.paramData).then((res) => {
        const resData = res.data;
        const { code, data, msg } = resData;
        if (code == 200) {
          //   console.log("data", data);
          this.currentVoltageVos = data;
          this.tableData = data.currentVoltageVos;
          this.basicData = data.pvEquipmentVo;
          this.realTimeData = data.inverterRealTimeVo;
        } else {
          this.$message.error(msg);
        }
      });
    },
    handleSaveTree() {
      console.log("this.paramData", this.paramData);
      const fromData = {
        name: this.treeName,
        keyId: this.paramData.id,
      };
      getSaveSuperior(fromData).then((res) => {
        const { code, data, msg } = res.data;
        if (code == 200) {
          this.$message.success("保存成功");
        } else {
          this.$message.error(msg);
        }
      });
    },
    handleTreeData(val) {},
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-table__body tr:hover > td {
  background-color: #cce5ff !important;
}

.details-title-warp {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin: 10px 0;
}
</style>
